<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" >
          <el-card class="box-card">
          <!-- 卡片1 -->
            <template #header>
              <div class="card-header">
                <span>销售额</span>
                <el-button class="button" type="primary">今日</el-button>
              </div>
              <!-- 销售额数据 -->
              <h3>{{ salesData }}</h3>
            </template>
            <!-- 图表1 -->
            <div ref="salesChart" class="chart"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" >
          <el-card class="box-card">
            <template #header>
            <!-- 卡片2 -->
              <div class="card-header">
                <span>订单数</span>
                <el-button class="button" type="primary">今日</el-button>
              </div>
              <!-- 订单额数据 -->
              <h3>{{ orderData }}</h3>
            </template>
            <!-- 图表2 -->
            <div ref="orderChart" class="chart"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" >
          <el-card class="box-card">
            <template #header>
            <!-- 卡片3 -->
              <div class="card-header">
                <span>访问量</span>
                <el-button class="button" type="primary">今日</el-button>
              </div>
              <!-- 访问量数据 -->
              <h3>{{ visitData }}</h3>
            </template>
            <!-- 图表3 -->
            <div ref="visitChart" class="chart"></div>
          </el-card>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content ep-bg-purple" >
          <el-card class="box-card">
            <template #header>
            <!-- 卡片4 -->
              <div class="card-header">
                <span>用户数</span>
                <el-button class="button" type="primary">今日</el-button>
              </div>
              <!-- 用户数数据 -->
              <h3>{{ userData }}</h3>
            </template>
            <!-- 图表4 -->
            <div ref="userChart" class="chart"></div>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'DashBoard',
  data () {
    return {
      salesData: '1111', // 销售额
      orderData: '2222', // 订单数
      visitData: '3333', // 访问量
      userData: '4444' // 用户数
    }
  },
  mounted () {
    // 初始化图表
    this.initSalesChart()
    this.initOrderChart()
    this.initVisitChart()
    this.initUserChart()
  },
  methods: {
    initSalesChart () {
      // 初始化销售额图表
      const chart = echarts.init(this.$refs.salesChart)
      const option = {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
        }]
      }
      chart.setOption(option)
    },
    initOrderChart () {
      // 订单数
      const chart = echarts.init(this.$refs.orderChart)
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单数',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      chart.setOption(option)
    },
    initVisitChart () {
      // 访问量
      const chart = echarts.init(this.$refs.visitChart)
      const option = {
        color: ['#3398DB'],
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }]
      }
      chart.setOption(option)
    },
    initUserChart () {
      // 用户数
      const chart = echarts.init(this.$refs.userChart)
      const option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '用户数',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220]
          }
        ]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  };
  .text{
    display: flex;
    justify-content: space-between;
  }
  .chart {
    height: 200px;
  }
}
</style>
